<!--  -->
<template>
  <div class="menu-bar">
    <scroll class="centent"
    :probe-type="3"
    :is-scroll-x="true">
      <ul>
        <li class="recommend">
          <span><icon icon="#icon-14"></icon></span>
          <span>每日推荐</span>
        </li>
        <li class="recommend">
          <span><icon icon="#icon-14"></icon></span>
          <span>每日推荐</span>
        </li>
        <li class="recommend">
          <span><icon icon="#icon-14"></icon></span>
          <span>每日推荐</span>
        </li>
        <li class="recommend">
          <span><icon icon="#icon-14"></icon></span>
          <span>每日推荐</span>
        </li>
        <li class="recommend">
          <span><icon icon="#icon-14"></icon></span>
          <span>每日推荐</span>
        </li>
        <li class="recommend">
          <span><icon icon="#icon-14"></icon></span>
          <span>每日推荐</span>
        </li>
        <li class="recommend">
          <span><icon icon="#icon-14"></icon></span>
          <span>每日推荐</span>
        </li>
        <li class="recommend">
          <span><icon icon="#icon-14"></icon></span>
          <span>每日推荐</span>
        </li>
      </ul>
    </scroll>
  </div>
</template>

<script>
import icon from "@/components/content/icon/Icon.vue";
import Scroll from '@/components/common/scroll/BScroll.vue'
export default {
  name: "MenuBar",
  components: {
    icon,
    Scroll
  },
};
</script>
<style lang="scss" scoped>
.centent {
  width: 100%;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  ul {
    display: inline-block;
  }
  .recommend {
    font-size: $font-size-small;
    display: inline-block;
    text-align: center;
    span:nth-child(1) {
      display: block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 25px;
      border-radius: 50%;
      color: orangered;
      margin: 5px 14px;
      background-color: rgba(128, 65, 65, 0.5);
    }
  }
}

// .centent {
//   width: 100%;
//   height: 68px;
//   white-space: nowrap;
//   overflow: hidden;
//   ul {
//     display: inline-block;
//     display: flex;
//     .recommend {
//       display: flex;
//       flex-direction: column;
//       justify-content: center;
//       width: 68px;
//       height: 68px;
//       text-align: center;
//       font-size: $font-size-small;
//       span:nth-child(1) {
//         display: block;
//         width: 40px;
//         height: 40px;
//         line-height: 38px;
//         font-size: 25px;
//         border-radius: 50%;
//         color: orangered;
//         margin: 0 14px 6px;
//         background-color: rgba(128, 65, 65, 0.5);
//       }
//     }
//   }
// }
</style>